<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .main {
        width: 1200px;
        height: 460px;
        margin: 30px auto;
        position: relative;
        overflow: hidden;
        border: solid 0.5px gray;
      }

      .banner {
        width: 1200px;
        height: 460px;
        overflow: hidden;
        position: relative;
      }

      .banner-slide {
        width: 1200px;
        height: 460px;
        background-repeat: no-repeat;
        float: left;
        display: none;
        cursor: default;
      }

      .slide1 {
        background: url("./img/bg1.jpg");
      }

      .slide2 {
        background: url("./img/bg2.jpg");
      }

      .slide3 {
        background: url("./img/bg3.jpg");
      }

      .slide-active {
        display: block;
      }

      .button {
        position: absolute;
        transform: rotate(180deg);
        height: 80px;
        width: 40px;
        margin-top: -260px;
        left: 244px;
        background: url(./img/arrow.png) center center no-repeat;
      }

      .button:hover {
        background-color: #333;
        opacity: 0.8;
      }

      .next {
        transform: rotate(0deg);
        left: auto;
        right: 0px;
      }

      .dots {
        position: absolute;
        right: 24px;
        line-height: 12px;
        bottom: 24px;
      }

      .dots span {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(7, 17, 27, 0.4);
        margin-left: 8px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
        cursor: pointer;
      }

      .dots span.active {
        background-color: white;
        box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
      }

      .menu-box {
        position: absolute;
        width: 244px;
        height: 460px;
        left: 0px;
        top: 0px;
        background: rgba(7, 17, 27, 0.3);
        z-index: 1;
      }

      a {
        text-decoration: none;
      }

      a:link,
      a:visited {
        color: #5e5e5e;
      }

      .icon {
        font-size: 28px;
        color: white;
        display: block;
        font-family: "iconfont";
        font-style: normal;
        font-weight: normal;
      }

      @font-face {
        font-family: "iconfont";
        src: url("./img/font/iconfont.eot");
        src: url("./img/font/iconfont.eot") format("embedded-opentype"),
          url("./img/font/iconfont.woff") format("woff"),
          url("./img/font/iconfont.ttf") format("truetype"),
          url("./img/font/iconfont.svg#iconfont") format("svg");
      }

      .menu-content {
        width: 244px;
        position: absolute;
        top: 0px;
        z-index: 2;
        height: 460px;
      }

      .menu-item {
        position: relative;
      }

      .menu-item:last-child a {
        border-bottom: none;
      }

      .menu-item a {
        display: block;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        height: 70px;
        width: 200px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        line-height: 70px;
      }

      .menu-item:hover {
        background-color: #333;
        opacity: 0.8;
      }

      .menu-item span {
        color: white;
      }

      .sub-menu {
        height: 460px;
        width: 730px;
        position: absolute;
        left: 244px;
        z-index: 3;
        display: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
      }

      .inner-box {
        width: 100%;
        height: 100%;
        background: url("./img/fe.png") no-repeat;
        display: none;
        background-size: cover;
      }

      .sub-inner-box {
        width: 100%;
        height: 100%;
      }

      .title {
        position: relative;
        /*   margin-top: 20px; */
        padding-top: 20px;
        margin-left: 30px;
        font-size: 20px;
        color: red;
        font-weight: bold;
      }

      .sub-row {
        position: relative;
        margin-top: 30px;
        margin-left: 30px;
      }

      .sub-row span {
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div class="main" id="main">
      <div class="menu-box"></div>
      <div class="sub-menu">
        <!--  手机配件 -->
        <div class="inner-box">
          <div class="sub-inner-box">
            <div class="title">手机、配件</div>
            <div class="sub-row">
              <span class="bold mr10">手机通讯：</span>
              <a href="">手机</a>
              <span class="ml10 mr10">/</span>
              <a href="">手机维修</a>
              <span class="ml10 mr10">/</span>
              <a href="">以旧换新</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">手机配件：</span>
              <a href="">手机壳</a>
              <span class="ml10 mr10">/</span>
              <a href="">手机存储卡</a>
              <span class="ml10 mr10">/</span>
              <a href="">数据线</a>
              <span class="ml10 mr10">/</span>
              <a href="">充电器</a>
              <span class="ml10 mr10">/</span>
              <a href="">电池</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">运营商：</span>
              <a href="">中国联通</a>
              <span class="ml10 mr10">/</span>
              <a href="">中国移动</a>
              <span class="ml10 mr10">/</span>
              <a href="">中国电信</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">智能设备：</span>
              <a href="">智能手环</a>
              <span class="ml10 mr10">/</span>
              <a href="">智能家居</a>
              <span class="ml10 mr10">/</span>
              <a href="">智能手表</a>
              <span class="ml10 mr10">/</span>
              <a href="">其他配件</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">娱乐：</span>
              <a href="">耳机</a>
              <span class="ml10 mr10">/</span>
              <a href="">音响</a>
              <span class="ml10 mr10">/</span>
              <a href="">收音机</a>
              <span class="ml10 mr10">/</span>
              <a href="">麦克风</a>
            </div>
          </div>
        </div>
        <!--  电脑 -->
        <div class="inner-box">
          <div class="sub-inner-box">
            <div class="title">电脑</div>
            <div class="sub-row">
              <span class="bold mr10">电脑：</span>
              <a href="">笔记本</a>
              <span class="ml10 mr10">/</span>
              <a href="">平板</a>
              <span class="ml10 mr10">/</span>
              <a href="">一体机</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">电脑配件：</span>
              <a href="">显示器</a>
              <span class="ml10 mr10">/</span>
              <a href="">CPU</a>
              <span class="ml10 mr10">/</span>
              <a href="">主板</a>
              <span class="ml10 mr10">/</span>
              <a href="">硬盘</a>
              <span class="ml10 mr10">/</span>
              <a href="">电源</a>
              <span class="ml10 mr10">/</span>
              <a href="">显卡</a>
              <span class="ml10 mr10">/</span>
              <a href="">其他配件</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">游戏设备：</span>
              <a href="">游戏机</a>
              <span class="ml10 mr10">/</span>
              <a href="">耳机</a>
              <span class="ml10 mr10">/</span>
              <a href="">游戏软件</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">网络产品：</span>
              <a href="">路由器</a>
              <span class="ml10 mr10">/</span>
              <a href="">网络机顶盒</a>
              <span class="ml10 mr10">/</span>
              <a href="">交换机</a>
              <span class="ml10 mr10">/</span>
              <a href="">存储卡</a>
              <span class="ml10 mr10">/</span>
              <a href="">网卡</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">外部产品：</span>
              <a href="">鼠标</a>
              <span class="ml10 mr10">/</span>
              <a href="">键盘</a>
              <span class="ml10 mr10">/</span>
              <a href="">U盘</a>
              <span class="ml10 mr10">/</span>
              <a href="">移动硬盘</a>
              <span class="ml10 mr10">/</span>
              <a href="">鼠标垫</a>
              <span class="ml10 mr10">/</span>
              <a href="">电脑清洁</a>
            </div>
          </div>
        </div>
        <!--家用电器-->
        <div class="inner-box">
          <div class="sub-inner-box">
            <div class="title">家用电器</div>
            <div class="sub-row">
              <span class="bold mr10">电视：</span>
              <a href="">国产品牌</a>
              <span class="ml10 mr10">/</span>
              <a href="">韩国品牌</a>
              <span class="ml10 mr10">/</span>
              <a href="">欧美品牌</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">空调：</span>
              <a href="">显示器</a>
              <span class="ml10 mr10">/</span>
              <a href="">柜式</a>
              <span class="ml10 mr10">/</span>
              <a href="">中央</a>
              <span class="ml10 mr10">/</span>
              <a href="">壁挂式</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">冰箱：</span>
              <a href="">多门</a>
              <span class="ml10 mr10">/</span>
              <a href="">对开门</a>
              <span class="ml10 mr10">/</span>
              <a href="">三门</a>
              <span class="ml10 mr10">/</span>
              <a href="">双门</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">洗衣机：</span>
              <a href="">滚筒式洗衣机</a>
              <span class="ml10 mr10">/</span>
              <a href="">迷你洗衣机</a>
              <span class="ml10 mr10">/</span>
              <a href="">洗烘一体机</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">厨房电器：</span>
              <a href="">油烟机</a>
              <span class="ml10 mr10">/</span>
              <a href="">洗碗机</a>
              <span class="ml10 mr10">/</span>
              <a href="">燃气灶</a>
            </div>
          </div>
        </div>
        <!--  家具 -->
        <div class="inner-box">
          <div class="sub-inner-box">
            <div class="title">家具</div>
            <div class="sub-row">
              <span class="bold mr10">家纺：</span>
              <a href="">被子</a>
              <span class="ml10 mr10">/</span>
              <a href="">枕头</a>
              <span class="ml10 mr10">/</span>
              <a href="">四件套</a>
              <span class="ml10 mr10">/</span>
              <a href="">床垫</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">灯具：</span>
              <a href="">台灯</a>
              <span class="ml10 mr10">/</span>
              <a href="">顶灯</a>
              <span class="ml10 mr10">/</span>
              <a href="">节能灯</a>
              <span class="ml10 mr10">/</span>
              <a href="">应急灯</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">厨具：</span>
              <a href="">烹饪锅具</a>
              <span class="ml10 mr10">/</span>
              <a href="">餐具</a>
              <span class="ml10 mr10">/</span>
              <a href="">菜板刀具</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">家装：</span>
              <a href="">地毯</a>
              <span class="ml10 mr10">/</span>
              <a href="">沙发垫套</a>
              <span class="ml10 mr10">/</span>
              <a href="">装饰字画</a>
              <span class="ml10 mr10">/</span>
              <a href="">照片墙</a>
              <span class="ml10 mr10">/</span>
              <a href="">窗帘</a>
            </div>
            <div class="sub-row">
              <span class="bold mr10">生活日用：</span>
              <a href="">收纳用品</a>
              <span class="ml10 mr10">/</span>
              <a href="">浴室用品</a>
              <span class="ml10 mr10">/</span>
              <a href="">雨伞雨衣</a>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-content" id="menu-content">
        <div class="menu-item">
          <a href="">
            <span>手机配件</span>
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <div class="menu-item">
          <a href="">
            <span>电脑</span>
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <div class="menu-item">
          <a href="">
            <span>家用电器</span>
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <div class="menu-item">
          <a href="">
            <span>家具</span>
            <i class="icon">&#xe665;</i>
          </a>
        </div>
      </div>

      <!-- 轮播图 -->
      <div class="banner" id="banner">
        <a href="javascript:void(0)">
          <div class="banner-slide slide1 slide-active"></div>
        </a>
        <a href="javascript:void(0)">
          <div class="banner-slide slide2"></div>
        </a>
        <a href="javascript:void(0)">
          <div class="banner-slide slide3"></div>
        </a>
      </div>
      <a href="javascript:void(0)" class="button prev" id="prev"></a>
      <a href="javascript:void(0)" class="button next" id="next"></a>
      <div class="dots" id="dots">
        <span class="active"></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </body>
  <script>
    //声明全局变量
    let index = 0, //当前显示图片的索引，默认值为0，
      timer = null, //定时器
      main = byId("main");
      (prev = byId("prev")), //上一张
      (next = byId("next")), //下一张
      (pics = byId("banner").getElementsByTagName("div")),
      (size = pics.length),
      (dots = byId("dots").getElementsByTagName("span")),
      (menuContent = byId("menu-content")),
      (menuTtems = menuContent.getElementsByTagName("div"));
    innerBox = document.getElementsByClassName("inner-box");
    subMenu = document.getElementsByClassName("sub-menu")[0];

    //封装事件绑定
    function addHandler(ele, type, handler) {
      ele.addEventListener(type, handler);
    }

    //封装getElementById()
    function byId(id) {
      return typeof id == "string" ? document.getElementById(id) : id;
    }

    //点击下一张按钮显示下一张图片
    addHandler(next, "click", function() {
      index++;
      if (index >= size) {
        index = 0;
      }
      changeImg();
    });

    //点击上一张按钮显示上一张图片
    addHandler(prev, "click", function() {
      index--;
      if (index < 0) {
        index = size - 1;
      }
      changeImg();
    });

    //封装切换图片函数
    function changeImg() {
      for (var i = 0; i < size; i++) {
        pics[i].style.display = "none";
        dots[i].className = "";
      }
      //显示当前图片
      pics[index].style.display = "block";
      //当前圆点高亮显示
      dots[index].className = "active";
    }

    //点击圆点切换图片
    for (let j = 0; j < size; j++) {
      addHandler(dots[j], "click", function() {
        index = j;
        changeImg();
      });
    }
    //轮播
    function startAutoPlay() {
      timer = setInterval(function() {
        index++;
        if (index >= size) {
          index = 0;
        }
        changeImg();
      }, 1000);
    }

    //清除定时器，停止自动轮播
    function stopAutoPlay() {
      clearInterval(timer);
    }
    //自动开启轮播
    startAutoPlay();
    //鼠标划入停止轮播
    addHandler(main, "mouseover", stopAutoPlay);
    //鼠标离开开始轮播
    addHandler(main, "mouseout", startAutoPlay);
    //鼠标滑过主菜单
    for (let m = 0; m < menuTtems.length; m++) {
      addHandler(menuTtems[m], "mouseover", function() {
        innerBox[m].style.display = "block";
        subMenu.style.display = "block";
      });
    }

    //鼠标移出主菜单
    for (let m = 0; m < menuTtems.length; m++) {
      addHandler(menuTtems[m], "mouseout", function() {
        innerBox[m].style.display = "none";
        subMenu.style.display = "none";
      });
    }
  </script>
</html>
